<template>
    <div class="login">
        <van-form class="form" @submit="login">
                <div class="avatar">
                    <img src="/assets/images/avatar.png" />
                </div>

                <van-field 
                    v-model="business.mobile"
                    name="mobile"
                    placeholder="手机号码"
                    left-icon="phone-o"
                    required
                    :rules="[
                        { required: true, message: '请填写手机号码' },
                        {pattern: /^1[3-9]\d{9}$/, message: '手机号码格式不正确'}
                    ]"
                />

                <van-field 
                    v-model="business.password"
                    type="password"
                    name="password"
                    placeholder="密码"
                    left-icon="warn-o"
                    required
                    :rules="[{ required: true, message: '请填写密码' }]"
                />

                <div class="button">
                    <van-button round block color="linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)" native-type="submit">登 录</van-button>
                </div>
                    
                <div class="forget">
                    <router-link to="/">返回首页</router-link>
                </div>
        </van-form>
    </div>
</template>

<script setup>
    //获取类似于vue2的this对象
    const {proxy} = getCurrentInstance()

    //创建数据
    let business = ref({
        mobile: '18888888888',
        password: '123123'
    })

    const login = async(values) =>
    {
        var result = await proxy.$POST({
            url: '/business/login',
            params: values
        })

        if(result.code == 0)
        {
            proxy.$fail(result.msg)
            return false
        }

        //将business数据存到pinia中
        proxy.$business.value = result.data

        //登录成功提醒并跳转
        proxy.$success({
            message: result.msg, 
            duration: 1000,
            onClose:() => proxy.$router.push(result.url)
        })
    }
</script>

<style scoped>
@import url('/assets/css/login.css');
</style>